<template>
    <div class="left_nav float_left">
        <el-menu class="el-menu-vertical-demo bg_white" @open="handleOpen" @close="handleClose">
            <el-menu-tree v-for="m in menus" :menu="m" :key="m.id"></el-menu-tree>
        </el-menu>
    </div>
</template>
<style lang="">
.bg_white {
	background-color: #fff;
}

.el-submenu .el-menu-item:hover,
.el-submenu__title:hover,
.el-menu-item:hover {
	background: #f2f6f9;
	border-left: 3px solid #20a0ff !important;
}

.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active,
.el-menu-item.is-active {
	background: #f2f6f9;
	border-left: 3px solid #20a0ff !important;
}
</style>
<script>
import ElMenuTree from './el-menu-tree.vue'

export default {
	data() {
		return {
			menus: [],
		}
	},
	components: {
		ElMenuTree,
	},

	methods: {
		handleOpen(key, keyPath) {
			// console.log(key);
			// console.log(keyPath);
		},
		handleClose(key, keyPath) {
			// console.log(key, keyPath);
		},

		initMenu() {
			var vm = this
			// console.log("vm.menus", vm.menus.length);
			if (vm.menus.length != 0) {
				// console.log("buweicaidanweikong");

				return
			}
			vm.$http
				.get(API.menuTreeByUser + localStorage.userId,{})
				.then(response => {
					console.log('aaa', response.body.data)

					vm.menus = response.body.data
					console.log(vm.menus)
				})
		},
		destroyLeftMenu() {
			this.menus = []
		},
	},

	//创建的时候查询该用户拥有的菜单
	created() {
		var vm = this

		eventBus.$on('initLeftMenu', function() {
			// console.log("触发生成 菜单啦");
			vm.initMenu()
		})

		eventBus.$on('destroyLeftMenu', function() {
			vm.destroyLeftMenu()
		})

		vm.initMenu()
	},
}
</script>
